<template lang="pug">
ECharts.line-chart(
  ref="echarts"
  :options="options"
  auto-resize)
</template>

<script>
/**
 * @name DoubleLineChart 折线图
 * @author Wangrf
 * @description 展示类目折线图
 */
export default {
  name: 'LineTable',
  props: {
    doubleSeries: {
      type: Array,
      default: () => ([])
    },
    doubleXAxis: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      options: {
        color: ['#0000EE', '#CD0000', '#CD6600'],
        // title: {
        //   text: this.title,
        //   // subtext: '数据来自西安兰特水电测控技术有限公司',
        //   x: 'center'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false,
            label: {
              show: false
            },
            type: 'cross'
          },
          textStyle: {
            fontSize: 12,
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: (param) => {
            let format = ''
            param.forEach((item, index) => {
              if (index === 0) format = param[0].name + '<br> &nbsp;'
              format = format.concat(item.marker + item.seriesName + '：' + (item.value || item.value === 0 ? item.value : '-') + ' ' + (item.seriesName === '压力' ? 'MPa' : 'm³/h') + '<br>')
            })
            return format
          }
        },
        legend: {
          data: ['瞬时流量', '压力'],
          y: '94%'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        axisPointer: {
          link: {xAxisIndex: 'all'}
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1],
            y: '86%'
          },
          {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 100,
            xAxisIndex: [0, 1]
          }
        ],
        grid: [{
          left: 50,
          right: 12,
          top: '8%',
          height: '30%'
        }, {
          left: 50,
          right: 12,
          top: '48%',
          height: '30%'
        }],
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: true},
            data: [],
            display: '',
            show: false
          },
          {
            gridIndex: 1,
            type: 'category',
            boundaryGap: false,
            axisLine: {onZero: true},
            data: [],
            position: 'bottom'
          }
        ],
        yAxis: [
          {
            name: '瞬时流量(m³/h)',
            type: 'value'
          },
          {
            gridIndex: 1,
            name: '压力(MPa)',
            type: 'value'
          }
        ],
        series: [
          {
            name: '瞬时流量',
            type: 'line',
            symbolSize: 8,
            hoverAnimation: false,
            data: [],
            markPoint: {
              symbolSize: 1,
              symbolOffset: [0, '50%'],
              label: {
                offset: [0, -15],
                formatter: ({seriesName, name, value}) => {
                  return `${seriesName}${name}：${value.toFixed(3)} m³/h`
                },
                backgroundColor: 'rgba(0,0,0,0.7)',
                borderRadius: 15,
                padding: [4, 10],
                lineHeight: 15,
                height: 15,
                distance: 20,
                color: '#fff',
                textBorderColor: '#000',
                fontSize: 12,
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                textBorderWidth: 1
              },
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            }
          },
          {
            name: '压力',
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            hoverAnimation: false,
            data: [],
            markPoint: {
              symbolSize: 1,
              symbolOffset: [0, '50%'],
              label: {
                offset: [0, -15],
                formatter: ({seriesName, name, value}) => {
                  return `${seriesName}${name}：${(value).toFixed(3)} MPa`
                },
                backgroundColor: 'rgba(0,0,0,0.7)',
                borderRadius: 15,
                padding: [4, 10],
                lineHeight: 15,
                height: 15,
                distance: 20,
                color: '#fff',
                textBorderColor: '#000',
                fontSize: 12,
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                textBorderWidth: 1
              },
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            }
          }
        ]
      }
    }
  },
  methods: {
    renderChart () {
      this.$nextTick(() => {
        this.options.series[0].data = this.doubleSeries[1]
        this.options.series[1].data = this.doubleSeries[0]
        this.options.xAxis[0].data = this.doubleXAxis
        this.options.xAxis[1].data = this.doubleXAxis
      })
    }
  },
  mounted () {
    this.renderChart()
  },
  watch: {
    doubleSeries () {
      this.renderChart()
    }
  }
}
</script>

<style lang="sass" scoped>
.line-chart
  // margin: 0 -14px
  width: 100%
  height: 100%
  overflow: hidden
</style>
